<template>
    <Layout style="height: 100%" class="main">
        <Sider hide-trigger collapsible :width="200" :collapsed-width="64" v-model="collapsed" class="left-sider"
               :style="{overflow: 'hidden'}">
            <side-menu accordion ref="sideMenu" :active-name="$route.name" :collapsed="collapsed"
                       @on-select="turnToPage" :menu-list="menuList">
                <!-- 需要放在菜单上面的内容，如Logo，写在side-menu标签内部，如下 -->
                <div class="logo-con">
                    <img v-show="!collapsed" :src="maxLogo" key="max-logo"/>
                    <img v-show="collapsed" :src="minLogo" key="min-logo"/>
                </div>
            </side-menu>
        </Sider>
        <Layout>
            <Header class="header-con">
                <header-bar :collapsed="collapsed" @on-coll-change="handleCollapsedChange">
                    <user :user-avator="userAvator"/>
                    <language @on-lang-change="setLocal" style="margin-right: 10px;" :lang="local"/>
                    <fullscreen v-model="isFullscreen" style="margin-right: 10px;"/>
                </header-bar>
            </Header>
            <Content class="main-content-con">
                <Layout class="main-layout-con">
                    <div class="tag-nav-wrapper">
                        <tags-nav :value="$route" @input="handleClick" :list="tagNavList" @on-close="handleCloseTag"/>
                    </div>
                    <Content class="content-wrapper">
                        <keep-alive :include="cacheList">
                            <router-view/>
                        </keep-alive>
                    </Content>
                </Layout>
            </Content>
        </Layout>
     </Layout>
</template>
<script>
    import SideMenu from './components/side-menu';
    import HeaderBar from './components/header-bar';
    import { getNewTagList, getNextName } from '../../libs/util';
    import { mapMutations, mapActions } from 'vuex';
    import Fullscreen from './components/fullscreen';
    import Language from './components/language';
    import User from './components/user';
    import TagsNav from './components/tags-nav'

    import minLogo from '../../assets/images/logo-min.jpg';
    import maxLogo from '../../assets/images/logo.jpg';

    export default {
        name: 'Main',
        components: {
            SideMenu,
            HeaderBar,
            Fullscreen,
            Language,
            User,
            TagsNav
        },
        data() {
            return {
                collapsed: true,
                minLogo,
                maxLogo,
                isFullscreen: false
            };
        },
        computed: {
            tagNavList () {
                return this.$store.state.app.tagNavList
            },
            userAvator () {
                return this.$config.runConfig.imgUrl + '/' + this.$store.state.user.avatorImgPath
            },
            menuList () {
                return this.$store.getters.menuList;
            },
            cacheList () {
                return this.tagNavList.length ? this.tagNavList.filter(item => !(item.meta && item.meta.notCache)).map(item => item.name) : []
            },
            local () {
                return this.$store.state.app.local
            }
        },
        methods: {
            ...mapMutations([
                'setBreadCrumb',
                'setTagNavList',
                'addTag',
                'setLocal'
            ]),
            turnToPage (name) {
                if (name.indexOf('isTurnByHref_') > -1) {
                    window.open(name.split('_')[1]);
                    return;
                }
                this.$router.push({
                    name: name
                });
            },
            handleCloseTag (res, type, name) {
                const nextName = getNextName(this.tagNavList, name)
                this.setTagNavList(res)
                let openName = ''
                if (type === 'all') {
                    this.turnToPage('home')
                    openName = 'home'
                } else if (this.$route.name === name) {
                    this.$router.push({ name: nextName })
                    openName = nextName
                }
                this.$refs.sideMenu.updateOpenName(openName)
            },
            handleCollapsedChange (state) {
                this.collapsed = state;
            },
            handleClick (item) {
                this.turnToPage(item.name)
            }
        },
        watch: {
            '$route' (newRoute) {
                this.setBreadCrumb(newRoute.matched)
                this.setTagNavList(getNewTagList(this.tagNavList, newRoute))
            }
        },
        mounted() {
            this.setTagNavList();
            this.addTag(this.$store.state.app.homeRoute);
            this.setBreadCrumb(this.$route.matched);
            // 设置初始语言
            this.setLocal(this.$i18n.locale);
        }
    };
</script>
<style lang="less">
    @import './main.less';
</style>